<template>
    <div class="energy">
        <div class="list">
            <div @click="change(0)" :style="`color:${active === 0 ? '#1cf4ff' : '#fff'}`">
                <div>总耗电量</div>
                <div>{{ total }}KW/H</div>
            </div>
            <div @click="change(index + 1)" v-for="(item, index) in list" :key="index" :style="`color:${active === index + 1 ? '#1cf4ff' : '#fff'}`">
                <div>班组{{ index + 1 }}</div>
                <div>{{ list[index] }}KW/H</div>
            </div>
        </div>
        <div class="main">
            <div>
                <div class="title">班组用电量占比</div>
                <div class="content" ref="content1"></div>
            </div>

            <div>
                <div class="title">年月周同环比</div>
                <div class="content" ref="content2"></div>
            </div>

            <div>
                <div class="title">时刻负载量</div>
                <div class="content" ref="content3"></div>
            </div>

            <div>
                <div class="title">日用电量</div>
                <div class="content" ref="content4"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { requestApi } from '@/requset/api'
export default {
    data() {
        return {
            list: [200, 300, 400, 500, 600],
            active: 0,
        }
    },
    components: {},
    computed: {
        total() {
            return this.list.reduce((a, b) => {
                return a + b
            }, 0)
        },
        today() {
            let currentDate = new Date()
            currentDate.setDate(currentDate.getDate() - 15)
            let year = currentDate.getFullYear() // 获取当前年份
            let month = currentDate.getMonth() + 1 // 获取当前月份（注意月份是从0开始，所以需要加1）
            let day = currentDate.getDate() // 获取当前日期
            return `${year}年${month}月${day}日至今日累计检测15天`
        },
    },
    methods: {
        change(i) {
            this.active = i
        },
        draw1() {
            let data = []
            this.list.forEach((item, index) => {
                data.push({
                    name: index + 1 + '班组',
                    value: item,
                })
            })

            let myChart = echarts.init(this.$refs.content1, 'light')
            let option = {
                title: {
                    name: '测点',
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    orient: 'vertical',
                    top: '0%',
                    left: '0%',
                    textStyle: {
                        color: '#fff',
                    },
                    type: 'scroll',
                },
                series: [
                    {
                        //   name: '不同分工厂的设备占比',
                        type: 'pie',

                        center: ['62%', '44%'],

                        avoidLabelOverlap: true,
                        label: {
                            show: true,
                            color: 'white',
                            position: 'inside',
                            width: 240,
                            overflow: 'break',
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '16',
                                fontWeight: 'bold',
                            },
                        },
                        labelLine: {
                            show: true,
                        },
                        data,
                    },
                ],
            }

            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
        draw2() {
            let myChart = echarts.init(this.$refs.content2)
            const dataX = []
            dataX.push('去年同比')
            dataX.push('上月环比')
            dataX.push('上周环比')
            let option = {
                color: ['#00f2f1', '#E33E31'],
                legend: {
                    type: 'plain',
                    // 修饰图例文字的颜色
                    textStyle: {
                        color: '#4c9bfd',
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dataX,
                    // name: "日期",
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#5187AA', // x轴文字颜色
                        },
                    },
                    // 去除x坐标轴的颜色
                    axisLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    // name: "纵轴名称",
                    show: false,
                    minInterval: 1,
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                        color: 'red',
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#1FF8FD', // x轴文字颜色
                        },
                    },
                    // 修改y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: '#284469',
                        },
                    },
                },
                // tooltip，鼠标放到折线图上展示的数据展示样式
                tooltip: {
                    trigger: 'axis',
                },
                series: [
                    {
                        name: '现在数据',
                        data: [19000, 1750, 380],
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            borderRadius: 10,
                            color: '#33CCFF',
                        },
                        label: {
                            show: true,
                            color: '#5187AA',
                            position: 'top',
                        },
                    },
                    {
                        name: '往期数据',
                        data: [20000, 1800, 400],
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            borderRadius: 10,
                            color: '#FF9999',
                        },
                        label: {
                            show: true,
                            color: '#5187AA',
                            position: 'top',
                        },
                    },
                ],
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '4%',
                    bottom: '4%',
                    show: true,
                    borderColor: '#012f4a',
                    containLabel: true,
                },
            }
            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
        draw3() {
            let myChart = echarts.init(this.$refs.content3)
            const now = new Date()
            // 倒推30分钟，得到起始时间
            const start = new Date(now.getTime() - 300 * 60 * 1000)
            // 生成相邻时间点，每个时间点间隔3分钟，直到当前时间为止
            const dataX = []
            const dataY = []
            for (let time = start; time <= now; time = new Date(time.getTime() + 30 * 60 * 1000)) {
                const hour = time.getHours().toString().padStart(2, '0')
                const minute = time.getMinutes().toString().padStart(2, '0')
                dataX.push(`${hour}:${minute}`)
            }
            for (let i = 0; i < dataX.length; i++) {
                const randomNum = Math.floor(Math.random() * 600) + 300
                dataY.push(randomNum)
            }

            const dataY1 = []
            for (let i = 0; i < dataX.length; i++) {
                const randomNum = Math.floor(Math.random() * 600) + 300
                dataY1.push(randomNum)
            }
            let option = {
                color: ['#00f2f1', '#E33E31'],
                legend: {
                    type: 'plain',
                    // 修饰图例文字的颜色
                    textStyle: {
                        color: '#4c9bfd',
                    },
                },
                xAxis: {
                    axisLabel: {
                        textStyle: {
                            color: '#1FF8FD', // x轴文字颜色
                        },
                    },
                    type: 'category',
                    boundaryGap: false,
                    data: dataX,
                    // name: "日期",
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#5187AA', // x轴文字颜色
                        },
                    },
                    // 去除x坐标轴的颜色
                    axisLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    // name: "纵轴名称",
                    minInterval: 1,
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                        color: 'red',
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#5187AA', // x轴文字颜色
                        },
                    },
                    // 修改y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: '#284469',
                        },
                    },
                },
                // tooltip，鼠标放到折线图上展示的数据展示样式
                tooltip: {
                    trigger: 'axis',
                },
                series: [
                    {
                        name: '今日负荷量',
                        data: dataY,
                        type: 'line',
                        itemStyle: {
                            color: '#33CCFF', //折线点的颜色
                            lineStyle: {
                                color: '#33CCFF', //折线的颜色
                            },
                        },
                    },
                    {
                        name: '昨日负荷量',
                        data: dataY1,
                        type: 'line',
                        itemStyle: {
                            color: '#FF9999', //折线点的颜色
                            lineStyle: {
                                color: '#FF9999', //折线的颜色
                            },
                        },
                    },
                ],
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '4%',
                    bottom: '4%',
                    show: true,
                    borderColor: '#012f4a',
                    containLabel: true,
                },
            }
            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
        draw4() {
            let myChart = echarts.init(this.$refs.content4)
            const now = new Date()
            // 倒推30分钟，得到起始时间
            const start = new Date(now.getTime() - 15 * 24 * 60 * 60 * 1000)
            // 生成相邻时间点，每个时间点间隔3分钟，直到当前时间为止
            const dataX = []
            const dataY = []
            const dataZ = []
            for (let time = start; time <= now; time = new Date(time.getTime() + 24 * 60 * 60 * 1000)) {
                const hour = time.getMonth()
                const minute = time.getDay()
                dataX.push(`${hour}/${minute}`)
            }
            for (let i = 0; i < dataX.length; i++) {
                const randomNum = Math.floor(Math.random() * 61 + 170)
                dataY.push(randomNum)
                dataZ.push(randomNum + 5)
            }
            let option = {
                color: ['#00f2f1', '#E33E31'],
                legend: {
                    type: 'plain',
                    // 修饰图例文字的颜色
                    textStyle: {
                        color: '#4c9bfd',
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dataX,
                    // name: "日期",
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#5187AA', // x轴文字颜色
                        },
                    },
                    // 去除x坐标轴的颜色
                    axisLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    // name: "纵轴名称",
                    show: false,
                    minInterval: 1,
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                        color: 'red',
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#1FF8FD', // x轴文字颜色
                        },
                    },
                    // 修改y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: '#284469',
                        },
                    },
                },
                // tooltip，鼠标放到折线图上展示的数据展示样式
                tooltip: {
                    trigger: 'axis',
                },
                series: [
                    {
                        name: '今日用电量',
                        data: dataY,
                        type: 'bar',
                        barWidth: 16,
                        itemStyle: {
                            borderRadius: 10,
                            color: '#33CCFF',
                        },
                        label: {
                            show: true,
                            color: '#5187AA',
                            position: 'top',
                        },
                    },
                    {
                        name: '昨日用电量',
                        data: dataZ,
                        type: 'bar',
                        barWidth: 18,
                        itemStyle: {
                            borderRadius: 10,
                            color: '#FF9999',
                        },
                        label: {
                            show: true,
                            color: '#5187AA',
                            position: 'top',
                        },
                    },
                ],
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '4%',
                    bottom: '4%',
                    show: true,
                    borderColor: '#012f4a',
                    containLabel: true,
                },
            }
            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
    },
    mounted() {
        this.draw1()
        this.draw2()
        this.draw3()
        this.draw4()
    },
}
</script>

<style lang="less" scoped>
.energy {
    padding: 20px;
    height: 100%;
    .list {
        display: flex;
        align-items: center;
        height: 80px;
        > div {
            height: 60px;
            background-color: rgb(14, 33, 74) !important;
            backdrop-filter: blur(3px); //毛玻璃属性
            border: 1px solid #007bff !important;
            flex: 1;
            overflow: hidden;
            transition: all 0.4s;
            position: relative;
            cursor: pointer;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 18px;
            padding: 10px;
            justify-content: space-around;
            border-radius: 10px;
        }

        > div:hover {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%) !important;
            // -webkit-transform: translate3d(0, -2px, 0);
            // transform: translate3d(0, -4px, 0);
            border: 1px solid #1cf4ff !important;
            box-shadow: 0 0 1rem rgba(28, 244, 255, 0.5) !important;
        }
    }
    .main {
        padding: 20px 10px;
        height: calc(100% - 140px);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 20px;
        > div {
            background-color: rgba(19, 39, 76, 0.7);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
        }

        .title {
            margin: 20px 0 0 0;
            padding-left: 20px;
            color: #11b7a4;
            font-size: 20px;
            font-weight: 500;
            border-left: 5px solid #11b7a4;
        }

        .content {
            flex: 1;
            padding: 20px;
        }
    }
}
</style>
